<template>
  <div class="app-container home" style="background-color:#13142A; height: 91vh;">
    <baidu-map class="map"
               :center="center"
               :scroll-wheel-zoom="true"
               @ready="handler"
               :theme="mapTheme">
      <div v-for="marker of markers" v-if="markers" class="map-title">
        <bm-marker :position="{lng: marker.longitude, lat: marker.latitude}"
                   :title="marker.scenicName"
                   :icon="{url: img, size: {width: 46, height: 67}}"
                   @click="infoWindowOpen2(marker)"
                   @mouseover="infoWindowOpen(marker)">
          <bm-info-window :position="{lng: marker.longitude, lat: marker.latitude}"
                          :show="marker.showFlag"
                          style="background-color: #fff;"
                          @close="infoWindowClose(marker)"
                          @open="infoWindowOpen(marker)">
            <p class="map-title">{{ marker.scenicName }}</p>
          </bm-info-window>
        </bm-marker>
      </div>&ndash;&gt;
      <bm-polyline :path="polylinePath" stroke-color="#33ffff" :stroke-opacity="1" :stroke-weight="2" :editing="false"></bm-polyline>
      <my-overlay :position="{lng: 107.365828, lat:34.313009}" text="高新区" />
    </baidu-map>

  </div>
</template>

<script>
    import MyOverlay from '@/components/myoer/myoer'
import mapStyle from '@/assets/custom_map_config.json';
import {listInfo_common} from "@/api/enterprise/info";

export default {
  name: "index",
    components:{
        'my-overlay':MyOverlay
    },
  data() {
    return {
      polylinePath:[
        {lng:107.202136,lat:34.353835},
        {lng:107.201561,lat:34.352643},
        {lng:107.201273,lat:34.348351},
        {lng:107.201273,lat:34.344536},
        {lng:107.201848,lat:34.341198},
        {lng:107.198686,lat:34.340244},
        {lng:107.200411,lat:34.335952},
        {lng:107.200123,lat:34.332375},
        {lng:107.200986,lat:34.330944},
        {lng:107.200986,lat:34.329274},
        {lng:107.200123,lat:34.328082},
        {lng:107.201273,lat:34.323073},
        {lng:107.201848,lat:34.323789},
        {lng:107.199548,lat:34.318303},
        {lng:107.200698,lat:34.314964},
        {lng:107.199261,lat:34.311386},
        {lng:107.196961,lat:34.306853},
        {lng:107.197536,lat:34.300412},
        {lng:107.195237,lat:34.294209},
        {lng:107.20616,lat:34.289914},
        {lng:107.214496,lat:34.291107},
        {lng:107.219958,lat:34.288721},
        {lng:107.229444,lat:34.290392},
        {lng:107.234043,lat:34.292062},
        {lng:107.23893,lat:34.287767},
        {lng:107.249279,lat:34.289914},
        {lng:107.25474,lat:34.291346},
        {lng:107.260202,lat:34.289437},
        {lng:107.264801,lat:34.289676},
        {lng:107.266814,lat:34.290392},
        {lng:107.27055,lat:34.290392},
        {lng:107.272275,lat:34.28896},
        {lng:107.276012,lat:34.289437},
        {lng:107.279174,lat:34.290153},
        {lng:107.282624,lat:34.29063},
        {lng:107.285211,lat:34.289437},
        {lng:107.291535,lat:34.289676},
        {lng:107.296134,lat:34.29063},
        {lng:107.302458,lat:34.289676},
        {lng:107.304758,lat:34.288006},
        {lng:107.31022,lat:34.288006},
        {lng:107.314244,lat:34.289676},
        {lng:107.317119,lat:34.290153},
        {lng:107.32373,lat:34.286574},
        {lng:107.32718,lat:34.287767},
        {lng:107.333216,lat:34.287767},
        {lng:107.336378,lat:34.288721},
        {lng:107.341553,lat:34.288721},
        {lng:107.341553,lat:34.288721},
        {lng:107.34529,lat:34.289676},
        {lng:107.349889,lat:34.288483},
        {lng:107.353338,lat:34.289676},
        {lng:107.359375,lat:34.288006},
        {lng:107.363112,lat:34.289199},
        {lng:107.365699,lat:34.290153},
        {lng:107.370011,lat:34.288006},
        {lng:107.374898,lat:34.289199},
        {lng:107.376622,lat:34.288244},
        {lng:107.37921,lat:34.28896},
        {lng:107.381797,lat:34.290153},
        {lng:107.384096,lat:34.28896},
        {lng:107.387833,lat:34.289199},
        {lng:107.393008,lat:34.288244},
        {lng:107.398182,lat:34.289199},
        {lng:107.400769,lat:34.288006},
        {lng:107.407955,lat:34.289199},
        {lng:107.41198,lat:34.287767},
        {lng:107.416004,lat:34.289914},
        {lng:107.422041,lat:34.291107},
        {lng:107.426928,lat:34.289437},
        {lng:107.428365,lat:34.291346},
        {lng:107.431814,lat:34.290869},
        {lng:107.434689,lat:34.291823},
        {lng:107.44705,lat:34.289914},
        {lng:107.454236,lat:34.28896},
        {lng:107.460848,lat:34.287767},
        {lng:107.466597,lat:34.288721},
        {lng:107.474358,lat:34.287528},
        {lng:107.48097,lat:34.288006},
        {lng:107.487006,lat:34.287051},
        {lng:107.495342,lat:34.286097},
        {lng:107.500517,lat:34.287051},
        {lng:107.504254,lat:34.287528},
        {lng:107.50914,lat:34.285858},
        {lng:107.517189,lat:34.287528},
        {lng:107.522076,lat:34.287051},
        {lng:107.5284,lat:34.287051},
        {lng:107.532712,lat:34.288006},
        {lng:107.538174,lat:34.288483},
        {lng:107.549097,lat:34.287051},
        {lng:107.551972,lat:34.287767},
        {lng:107.556571,lat:34.289199},
        {lng:107.56577,lat:34.287051},
        {lng:107.576118,lat:34.288483},
        {lng:107.584742,lat:34.29063},
        {lng:107.587904,lat:34.292539},
        {lng:107.588479,lat:34.295879},
        {lng:107.589341,lat:34.301605},
        {lng:107.589341,lat:34.306853},
        {lng:107.588191,lat:34.309954},
        {lng:107.586179,lat:34.315679},
        {lng:107.58158,lat:34.320688},
        {lng:107.574681,lat:34.322358},
        {lng:107.568069,lat:34.323789},
        {lng:107.562033,lat:34.324743},
        {lng:107.555134,lat:34.324743},
        {lng:107.54651,lat:34.32355},
        {lng:107.537886,lat:34.322596},
        {lng:107.531562,lat:34.322596},
        {lng:107.525813,lat:34.32522},
        {lng:107.519201,lat:34.325458},
        {lng:107.514602,lat:34.327366},
        {lng:107.508566,lat:34.331898},
        {lng:107.502241,lat:34.331421},
        {lng:107.490743,lat:34.333329},
        {lng:107.482407,lat:34.338098},
        {lng:107.478382,lat:34.337144},
        {lng:107.469184,lat:34.341913},
        {lng:107.464872,lat:34.34239},
        {lng:107.45941,lat:34.343582},
        {lng:107.456248,lat:34.342629},
        {lng:107.443313,lat:34.345967},
        {lng:107.440725,lat:34.345967},
        {lng:107.431527,lat:34.346444},
        {lng:107.422616,lat:34.348351},
        {lng:107.416579,lat:34.348113},
        {lng:107.409968,lat:34.348828},
        {lng:107.406231,lat:34.347159},
        {lng:107.395595,lat:34.347159},
        {lng:107.388983,lat:34.346444},
        {lng:107.383521,lat:34.344298},
        {lng:107.376047,lat:34.342629},
        {lng:107.370298,lat:34.343344},
        {lng:107.362824,lat:34.34549},
        {lng:107.357938,lat:34.346205},
        {lng:107.351326,lat:34.347159},
        {lng:107.345864,lat:34.349543},
        {lng:107.338391,lat:34.349305},
        {lng:107.335228,lat:34.350497},
        {lng:107.331204,lat:34.352405},
        {lng:107.32718,lat:34.355504},
        {lng:107.324593,lat:34.356219},
        {lng:107.321718,lat:34.35765},
        {lng:107.318843,lat:34.358126},
        {lng:107.316256,lat:34.356696},
        {lng:107.311944,lat:34.356696},
        {lng:107.308495,lat:34.35765},
        {lng:107.304183,lat:34.360034},
        {lng:107.299009,lat:34.359557},
        {lng:107.296422,lat:34.359557},
        {lng:107.292972,lat:34.361702},
        {lng:107.288948,lat:34.359557},
        {lng:107.285786,lat:34.363371},
        {lng:107.281761,lat:34.361941},
        {lng:107.2763,lat:34.361941},
        {lng:107.274,lat:34.360272},
        {lng:107.268251,lat:34.359557},
        {lng:107.264226,lat:34.360272},
        {lng:107.259915,lat:34.36051},
        {lng:107.253878,lat:34.361702},
        {lng:107.249854,lat:34.363848},
        {lng:107.246117,lat:34.362656},
        {lng:107.241805,lat:34.364802},
        {lng:107.237205,lat:34.364563},
        {lng:107.233756,lat:34.363133},
        {lng:107.230019,lat:34.361464},
        {lng:107.227432,lat:34.363133},
        {lng:107.223695,lat:34.361226},
        {lng:107.214784,lat:34.361226},
        {lng:107.213059,lat:34.359795},
        {lng:107.209609,lat:34.360034},
        {lng:107.206447,lat:34.361464},
        {lng:107.204435,lat:34.359318},
        {lng:107.202136,lat:34.353358},
      ],
      mapTheme: mapStyle,
      center: {
        lng: 107.366562,
        lat: 34.321069
      },
      show: false,
      point: "",
      districtLoading: 0,
      markers: [],
      blist: [],
      centerlabel:null,
      img:require("../../assets/images/location.png"),
    };
  },
  created() {

  },
  mounted() {
    this.getInfo();//地图列表
  },

  methods: {
    handler({BMap, map}) {
      this.map = map;
      // 初始化地图,设置中心点坐标
      var point = new BMap.Point(107.366562,34.321069);
      map.centerAndZoom(point, 13);
      this.setMarker();
      //var point = new BMap.Point(107.366562,34.321069);
      //this.addDistrict("陈仓区", map, BMap);
     /* var citys = ["渭滨区", "陈仓区", "凤翔区","岐山县","扶风县", "眉县", "陇县", "千阳县", "麟游县", "凤县", "太白县"];
      //var citys = ["千河镇", "磻西镇","天王镇","马营镇","钓渭镇","八鱼镇"];
      for (var i = 0; i < citys.length; i++) {
        this.addDistrict(citys[i], map, BMap);
      }*/
    },
    //地图列表
    getInfo() {
      listInfo_common("").then(res => {
        //console.log(res.rows)
        var arr = []
        for (var i = 0; i < res.rows.length; i++) {
          arr.push(
            {
              longitude: res.rows[i].epLg,
              latitude: res.rows[i].epLt,
              scenicName: res.rows[i].epName,
              showFlag: false,
              id: res.rows[i].epId,
              userName: res.rows[i].epUserName
            }
          )
        }
        //console.log(arr)
        this.markers = arr;
      })
    },
    infoWindowClose(marker) {
      marker.showFlag = false
    },
    infoWindowOpen(marker) {
      marker.showFlag = true
    },
    infoWindowOpen2(value) {

      const userName = value.userName
      listInfo_common("").then(res => {
        console.log(userName)
        var arr = []
        for (var i = 0; i < res.rows.length; i++) {
          this.$router.push({
            path: "/enterprise/result",
            query: {
              userName: userName
            }
          })
        }
      })

    },
    goTarget(href) {
      window.open(href, "_blank");
    },

    addDistrict(districtName, map, BMap) {
      var that = this
      //console.log("<>"+districtName);
      //使用计数器来控制加载过程
      that.districtLoading++;
      var bdary = new BMap.Boundary();
      bdary.get(districtName, function (rs) {       //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        //console.log(""+JSON.stringify(rs));
        if (count === 0) {
          console.log(districtName)
          alert('未能获取当前输入行政区域');
          return;
        }
        for (var i = 0; i < count; i++) {
          that.polygons.path.push({points: rs.boundaries[i], name: districtName});
          //that.blist.push({ points: rs.boundaries[i], name: districtName });
        }
        ;
        //加载完成区域点后计数器-1
        that.districtLoading--;
        if (that.districtLoading == 0) {
          //全加载完成后画端点
          that.drawBoundary(map, BMap);
        }
      });
    },

    drawBoundary(map, BMap) {
      var that = this
      //包含所有区域的点数组
      var pointArray = [];

      /*画遮蔽层的相关方法
      *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
      *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      var pNW = {lat: 59.0, lng: 73.0}
      var pNE = {lat: 59.0, lng: 136.0}
      var pSE = {lat: 3.0, lng: 136.0}
      var pSW = {lat: 3.0, lng: 73.0}


   /*   var pNW = {lat: 107.590719, lng: 34.307115}
      var pNE = {lat: 106.946161, lng: 136.0}
      var pSE = {lat: 107.201797, lng: 34.294591}
      var pSW = {lat: 107.367807, lng: 34.35039}*/

      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      var pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      //循环添加各闭合区域
      for (var i = 0; i < that.polygons.path.length; i++) {
        //添加显示用标签层
        var label = new BMap.Label(that.polygons.path[i].name, {offset: new BMap.Size(1, -1)});
        label.hide();
        map.addOverlay(label);

        //添加多边形层并显示
        var ply = new BMap.Polygon(that.polygons.path[i].points, {
          strokeWeight: 2,
          strokeColor: "#33ffff",
          fillOpacity: 0.1,
          fillColor: "#0e4dea"
        }); //建立多边形覆盖物
        ply.name = that.polygons.path[i].name;
        ply.label = label;


        map.addOverlay(ply);

        if(that.polygons.path[i].name == '陈仓区'){
          that.centerlabel = new BMap.Label(that.polygons.path[i].name, {offset: new BMap.Size(-100, -50)});
          that.centerlabel.setStyle({
            color: "#fff",
            fontSize: "12px",
            backgroundColor: "0.05",
            border: "0",
            fontWeight: "bold"
          });
        }else{
          that.centerlabel = new BMap.Label(that.polygons.path[i].name, {offset: new BMap.Size(0, 0)});
          that.centerlabel.setStyle({
            color: "#fff",
            fontSize: "12px",
            backgroundColor: "0.05",
            border: "0",
            fontWeight: "bold"
          });
        }
        that.centerlabel.setPosition(ply.getBounds().getCenter());
        map.addOverlay(that.centerlabel);

        //将点增加到视野范围内
        var path = ply.getPath();
        pointArray = pointArray.concat(path);
        //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        // pArray = pArray.concat(path);
        pArray.push(pArray[0]);
      }

      //限定显示区域，需要引用api库
      var boundply = new BMap.Polygon(pointArray);
      /*var BMapLib = new BMap.lib();
      BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());*/
      map.setViewport(pointArray);    //调整视野

      //添加遮蔽层
      var plyall = new BMap.Polygon(pArray, {
          strokeOpacity: 1,
          strokeColor: "#ee085e",
          strokeWeight: 10,
          fillColor: "#f80c14",
          fillOpacity: 1
        }
      ); //建立多边形覆盖物
      map.addOverlay(plyall);
    },
    click(evt) {
      //alert(evt.target.label);
    },

    mouseover(evt) {
      evt.target.setFillColor("#277b36");
    },

    mousemove(evt) {
      evt.target.setFillColor("#277b36")
    },

    mouseout(evt) {
      evt.target.setFillColor("#186b78");
    }

  },
};
</script>

<style>

.map {
  width: 100%;
  height: 100%;
}
</style>

